<template>
  <div class="home">
    <van-swipe class="banner-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <div class="banner-item banner1">旅游资讯管理平台</div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="banner-item banner2">一站式旅游信息解决方案</div>
      </van-swipe-item>
      <van-swipe-item>
        <div class="banner-item banner3">轻松管理您的旅游业务</div>
      </van-swipe-item>
    </van-swipe>
    
    <div class="stats-grid">
      <van-cell-group>
        <van-grid :column-num="2" :border="false">
          <van-grid-item>
            <div class="stat-card">
              <van-icon name="location-o" size="30px" color="#1989fa" />
              <div class="stat-info">
                <div class="stat-number">{{ stats.destinations }}</div>
                <div class="stat-label">目的地</div>
              </div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="stat-card">
              <van-icon name="notes-o" size="30px" color="#07c160" />
              <div class="stat-info">
                <div class="stat-number">{{ stats.articles }}</div>
                <div class="stat-label">资讯文章</div>
              </div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="stat-card">
              <van-icon name="contact-o" size="30px" color="#ff976a" />
              <div class="stat-info">
                <div class="stat-number">{{ stats.users }}</div>
                <div class="stat-label">注册用户</div>
              </div>
            </div>
          </van-grid-item>
          <van-grid-item>
            <div class="stat-card">
              <van-icon name="orders-o" size="30px" color="#6465ff" />
              <div class="stat-info">
                <div class="stat-number">{{ stats.orders }}</div>
                <div class="stat-label">订单数量</div>
              </div>
            </div>
          </van-grid-item>
        </van-grid>
      </van-cell-group>
    </div>
    
    <div class="recent-section">
      <van-cell title="最近资讯" is-link @click="goToArticles">
        <template #right-icon>
          <van-icon name="arrow" />
        </template>
      </van-cell>
      
      <van-list>
        <van-cell 
          v-for="article in recentArticles" 
          :key="article.id"
          :title="article.title"
          :label="`${article.category} · ${article.date}`"
          is-link
        >
          <template #icon>
            <div class="placeholder-image"></div>
          </template>
        </van-cell>
      </van-list>
    </div>
    
    <div class="quick-actions">
      <van-cell-group title="快捷操作">
        <van-grid clickable :column-num="4">
          <van-grid-item icon="add-o" text="新增资讯" @click="goToAddArticle" />
          <van-grid-item icon="location-o" text="添加目的地" @click="goToAddDestination" />
          <van-grid-item icon="contact-o" text="用户管理" @click="goToUsers" />
          <van-grid-item icon="setting-o" text="系统设置" @click="goToSettings" />
        </van-grid>
      </van-cell-group>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const stats = ref({
  destinations: 128,
  articles: 342,
  users: 12456,
  orders: 876
})

const recentArticles = ref([
  { id: 1, title: '夏日海滨度假胜地推荐', category: '景点推荐', date: '2023-08-15' },
  { id: 2, title: '秋季登山装备指南', category: '出行攻略', date: '2023-08-12' },
  { id: 3, title: '特色民宿体验分享', category: '住宿推荐', date: '2023-08-10' },
  { id: 4, title: '自驾游路线规划技巧', category: '交通指南', date: '2023-08-05' }
])

const goToArticles = () => {
  router.push('/articles')
}

const goToAddArticle = () => {
  router.push('/articles')
}

const goToAddDestination = () => {
  router.push('/destinations')
}

const goToUsers = () => {
  router.push('/users')
}

const goToSettings = () => {
  router.push('/settings')
}
</script>

<style scoped>
.home {
  padding-bottom: 20px;
}

.banner-swipe {
  height: 150px;
}

.banner-item {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  color: white;
  background: linear-gradient(to right, #1989fa, #07c160);
}

.banner2 {
  background: linear-gradient(to right, #07c160, #6465ff);
}

.banner3 {
  background: linear-gradient(to right, #6465ff, #ff976a);
}

.stats-grid {
  margin: 15px 0;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 10px;
}

.stat-info {
  margin-left: 10px;
  text-align: left;
}

.stat-number {
  font-size: 20px;
  font-weight: bold;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.recent-section {
  margin: 15px 0;
}

.placeholder-image {
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-right: 10px;
}

.quick-actions {
  margin-top: 20px;
}
</style>